<script setup>
// 引入 api
import { ref } from "vue"

// 初始数据
const initArr = [
    { name: '张三', age: 20 },
    { name: '李四', age: 22 },
    { name: '王五', age: 18 }
]

// 动态列表
const list = ref(initArr)

// 点击函数
function btn1() {
    // 按姓名排序
    // 重新渲染
    list.value = initArr
}

function btn2() {
    // 复制列表
    const newArr = initArr.slice()

    // 按年龄排序
    for (let i = 0; i < newArr.length - 1; i++) {
        for (let j = 0; j < newArr.length - 1 - i; j++) {
            if (newArr[j].age > newArr[j + 1].age) {
                const temp = newArr[j]
                newArr[j] = newArr[j + 1]
                newArr[j + 1] = temp
            }
        }
    }

    // 重新渲染
    list.value = newArr
}

</script>

<template>
    <!-- 按钮 -->
    <input type="button" value="按名字排序" @click="btn1" />
    <input type="button" value="按年龄排序" @click="btn2" />

    <li v-for="(item, index) in list" key="index">{{ item.name }} - {{ item.age }}</li>
</template>